<!--
 * @Author: “linzesen” zx2905111@github.com
 * @Date: 2023-08-17 18:11:03
 * @LastEditors: “linzesen” zx2905111@github.com
 * @LastEditTime: 2023-09-20 10:20:02
 * @FilePath: \hxsapp-fe3_new\src\common\components\LsSvga\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <div ref="demoCanvas" class="ls_svga_box" :style="style"></div>
</template>
<script>
import SVGA from 'svgaplayerweb';

export default {
    name: 'HxsSvg',
    props: {
        width: [Number, String],
        height: [Number, String],
        src: String,
        pause_time: {
          type:[Number, String],
          default: null
        },
    },
    computed: {
        style() {
            return {
                width: this.width ? this.width : '100px',
                height: this.height ? this.height : '100px'
            }
        }
    },
    created() {
        this.svga_player = null;
        this.svga_parser = null;
        this.srcWatcher = null;
    },
    beforeDestroy() {
        this.svga_parser = null;
        this.svga_player = null;
        this.srcWatcher();
        this.srcWatcher = null;
    },
  mounted () {
        let that=this
        if (!this.srcWatcher) {
            this.srcWatcher = this.$watch('src', nval => {

                if (!nval || !/https?:\/\//.test(nval)) return false;

                this.$nextTick(() => {
                    let player = this.svga_player,
                        parser = this.svga_parser;
                    if (!player) {
                        player = this.player = new SVGA.Player(this.$refs.demoCanvas);
                        parser = this.parser = new SVGA.Parser(this.$refs.demoCanvas); // 如果你需要支持 IE6+，那么必须把同样的选择器传给 Parser。
                    }

                    player.clear();
                    parser.load(nval, function (videoItem) {
                        player.setVideoItem(videoItem);
                        player.startAnimation();
                       
                      if (that.pause_time != null) {
                          that.$emit('startSvga');
                          setTimeout(() => {
                           player.pauseAnimation();
                            //numhtml.pauseAnimation();
                          }, that.pause_time);
                        }
                    });
                });
            }, {immediate: true});
        }
    },
};
</script>
<style  lang="scss">
.ls_svga_box{
}
</style>
